<template>
	<div class="daily">
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>财务日结</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content">
			<div class="search-row">
				<div>
					<el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions" v-model="date"
					 style="width: 100%;"></el-date-picker>
				</div>
				<div>
					<el-button type="primary" @click="settleAccount"><i class="el-icon-search"></i> 结算</el-button>
				</div>
				<div>
					<el-button type="primary" @click="saveDaily"><i class="el-icon-plus"></i> 保存</el-button>
				</div>
			</div>
			<div>
				<div class="daily-table">
					<table class="table font-family-1">
						<tbody>
							<tr>
								<td>结算日期</td>
								<td colspan="3">{{dailyData.balance_date}}</td>
							</tr>
							<tr>
								<td width="20%">结算人</td>
								<td width="30%" colspan="1">{{dailyData.admin_name}}</td>
								<td width="20%">结算时间</td>
								<td width="30%" colspan="1">{{dailyData.balance_account_time}}</td>
							</tr>
							<tr>
								<td>订单总量</td>
								<td colspan="3">{{dailyData.good_order_num}}</td>
							</tr>
							<tr>
								<td>销售总量</td>
								<td colspan="3">{{dailyData.food_sale_num}}</td>
							</tr>
							<tr>
								<td>产生总运费</td>
								<td colspan="">{{parseFloat(dailyData.freight_fee).toFixed(2)}}</td>
								<td>产生包装费</td>
								<td colspan="">{{parseFloat(dailyData.packing_fee).toFixed(2)}}</td>
							</tr>
							<tr>
								<td>产生红包总费用</td>
								<td colspan="">{{parseFloat(dailyData.red_bag_total).toFixed(2)}}</td>
								<td>产生积分总费用</td>
								<td colspan="">{{parseFloat(dailyData.point_total).toFixed(2)}}</td>
							</tr>
							<tr>
								<td>销售额</td>
								<td colspan="3">{{parseFloat(dailyData.balance_cost).toFixed(2)}}</td>
							</tr>
							<tr>
								<td>总计</td>
								<td colspan="3">{{parseFloat(dailyData.balance_actual_cost).toFixed(2)}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import DailyService from './DailyService.js';
	import tools from '@/utils/tools.js';
	export default {
		name: 'Daily',
		data() {
			return {
				date: '',
				dailyData: {},

				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
			}
		},
		created() {
			let myDate = new Date();
			this.date = tools.dateFtt("yyyy-MM-dd", myDate);

			this.gettodaymsg(this.date);
		},
		methods: {
			gettodaymsg(date) {
				DailyService.getdayreportService({
					date: date
				}, res => {
					// console.log(res);
					this.dailyData = res;
					//结算时间
					if (!('balance_account_time' in this.dailyData)) {
						let myDate = new Date();
						let nowTime = tools.dateFtt("yyyy-MM-dd hh:mm:ss", myDate);
						this.dailyData.balance_account_time = nowTime;
					};
					if (!('balance_date' in this.dailyData)) {
						this.dailyData.balance_date = this.date;
					};
				});
			},
			settleAccount() {
				this.gettodaymsg(this.date);
			},
			saveDaily() {
				if (this.dailyData) {
					DailyService.adddayreportService(this.dailyData, res => {
						console.log(res);
						if(res.insert){
							this.$message({
								message: '保存成功',
								type: 'success'
							});
						}else{
							this.$message({
								message: '已日结，请不要重复日结',
							});
						}
						
					})
				} else {
					this.$message('请先点击日结');
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@import '../../../style/Common.less';

	.search-row {
		// width: calc(100%-40px);
		// height: 60px;
		// background-color: #FFFFFF;
		// border-radius: 10px;
		// padding: 0 20px;
		display: flex;
		align-items: center;

		div:nth-child(1) {
			width: 200px;
		}

		div:nth-child(2) {
			margin-left: 20px;
		}

		div:nth-child(3) {
			margin-left: auto;
		}
	}

	.daily-table {
		background-color: #FFFFFF;
		border-radius: 5px;
		padding: 10px;
		margin-top: 20px;
	}

	.table {
		width: 100%;
		border: 1px solid #ddd;
		border-collapse: collapse;
		border-spacing: 0;
	}

	.table th,
	td {
		border: 1px solid #ddd;
		padding: 8px;
		line-height: 20px;
	}
</style>
